<template>
  <div class="search-history">
    <van-cell title="搜索历史">
      <van-icon
        v-if="!isEditStatus"
        name="delete"
        @click="isEditStatus = true"
      />
      <template v-else>
        <span @click="delAll">全部删除</span>
        &nbsp;
        <span @click="isEditStatus = false">完成</span>
      </template>
    </van-cell>
    <van-cell v-for="v of list" :key="v" :title="v" @click="onClickKw(v)">
      <van-icon v-if="isEditStatus" name="close" @click="delKw(v)" />
    </van-cell>
  </div>
</template>

<script>
import { getItem, setItem } from '@/utils/storage'
export default {
  name: 'SearchHistory',
  data() {
    return {
      // 是否为编辑状态
      isEditStatus: false,
      // 先从本地存储中拿，如果没有，那就初始化为空数组
      list: getItem('searchHistoryList') || [],
    }
  },
  watch: {
    // 只要数组发生变化，就需要更新本地存储
    list() {
      setItem('searchHistoryList', this.list)
    },
  },
  methods: {
    // 当点击历史记录中的关键字，要去搜索，展示搜索结果
    onClickKw(kw) {
      // 当前组件无法完成搜索，只能触发事件，告知外界点击了历史记录中的关键字
      // 至于外界要做什么事情，让外界自己去监听，自己去做
      this.$emit('click-kw', kw)
      // 可以获取到父组件实例，然后调用父组件实例身上的方法
      // 这种方式的缺点：耦合性太强
      // this.$parent.onSearch(kw)
    },
    delAll() {
      this.list = []
      this.isEditStatus = false
    },
    delKw(kw) {
      // 从当前历史记录的列表中 找出 不等于 这个将要被删除的kw 的其他kw
      this.list = this.list.filter(v => v !== kw)
    },
  },
}
</script>

<style scoped lang="less"></style>
